<div class="well">
    <div class="list-group-item">
    <h3>设置头像</h3>
    <hr>
        <div class="preview well" style="width: 140px; height: 140px;margin-left: 60px">
        </div>
    <form class="form-horizontal" method="post" action="{% url 'userinfo' 'head' %}" enctype="multipart/form-data">
        {% csrf_token %}
        <div class="form-group ">
            <div class="input-group col-sm-offset-1 col-sm-10">
                <input type="file" id="head_img"  name="head_img" onchange="upload()">
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-12">
                <button type="submit" class="btn btn-primary
                btn-md btn-default col-md-offset-10">提交</button>
            </div>
        </div>
    </form>
        </div>
</div>
<script>
    {# 实现图片预览 功能 #}
    upload = function (){
        {#预览的div#}
        let  preview = document.querySelector('.preview')
        {# input 组件 #}
        let fiel_input = document.querySelector('#head_img')
        console.log(fiel_input)
        {# 上传的文件对象的名字 #}
        let img_obj = fiel_input.files[0]
        console.log(img_obj)
        {# 创建一个图片文件 img标签 #}
        let img = new Image()
        img.src = URL.createObjectURL(img_obj)
        img.width = 100
        img.height = 100
        img.className = 'img-circle'
        console.log(img)
        {# 将创建出来的图片标签 添加到preview中去 #}
        preview.appendChild(img)

    }
</script>